<!--
 * @Author: your name
 * @Date: 2021-01-27 17:35:58
 * @LastEditTime: 2021-01-28 18:25:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tlwok-front-purchase-platfrom\src\pages\admin\settingsMenu\adsTools.vue
-->
<template>
  <div>
    <div class="flex-box notice mt50">
      <label class="label bold">公告：</label>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入公告"
        v-model.trim="notice"
        @blur="updateNotice"
      >
      </el-input>
    </div>
    <div class="mt50">
      <h3>集团采购首页</h3>
      <div class="flex-box">
        <label class="label">图片预览：</label>
        <div class="JTImgList">
          <template v-if="editJTImg">
            <el-button
              type="primary"
              style="margin-bottom: 10px"
              @click="submitJTUpload"
              >完成</el-button
            ><br />
            <el-upload
              ref="JTupload"
              action="#"
              :limit="6"
              :file-list="JTImgList"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :http-request="onJTUpload"
              accept="image/jpg,image/jpeg,image/png"
              :on-remove="onJTRemove"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                *最多上传6张，支持jpg、jpeg和png格式
              </div>
            </el-upload>
          </template>
          <template v-else>
            <el-button
              type="primary"
              @click="editJTImg = true"
              style="margin-bottom: 10px"
              >编辑图片</el-button
            ><br />
            <el-image
              v-for="(item, index) in JTImgList"
              :key="index"
              style="
                width: 148px;
                height: 148px;
                border-radius: 6px;
                margin: 0 8px 8px 0;
              "
              :src="item.url"
            >
            </el-image>
          </template>
        </div>
      </div>
    </div>
    <div class="mt50">
      <h3>供应商首页（已注册）</h3>
      <div class="flex-box">
        <label class="label">图片预览：</label>
        <div class="JTImgList">
          <template v-if="editVImg1">
            <el-button
              type="primary"
              style="margin-bottom: 10px"
              @click="submitVUpload1"
              >完成</el-button
            ><br />
            <el-upload
              ref="JTupload"
              action="#"
              :limit="6"
              :file-list="VImgList1"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :http-request="onVUpload1"
              accept="image/jpg,image/jpeg,image/png"
              :on-remove="onVRemove1"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                *最多上传6张，支持jpg、jpeg和png格式
              </div>
            </el-upload>
          </template>
          <template v-else>
            <el-button
              type="primary"
              @click="editVImg1 = true"
              style="margin-bottom: 10px"
              >编辑图片</el-button
            ><br />
            <el-image
              v-for="(item, index) in VImgList1"
              :key="index"
              style="
                width: 148px;
                height: 148px;
                border-radius: 6px;
                margin: 0 8px 8px 0;
              "
              :src="item.url"
            >
            </el-image>
          </template>
        </div>
      </div>
    </div>
    <div class="mt50">
      <h3>供应商首页（未注册）</h3>
      <div class="flex-box">
        <label class="label">图片预览：</label>
        <div class="JTImgList">
          <template v-if="editVImg2">
            <el-button
              type="primary"
              style="margin-bottom: 10px"
              @click="submitVUpload2"
              >完成</el-button
            ><br />
            <el-upload
              ref="JTupload"
              action="#"
              :limit="6"
              :file-list="VImgList2"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :http-request="onVUpload2"
              accept="image/jpg,image/jpeg,image/png"
              :on-remove="onVRemove2"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">
                *最多上传6张，支持jpg、jpeg和png格式
              </div>
            </el-upload>
          </template>
          <template v-else>
            <el-button
              type="primary"
              @click="editVImg2 = true"
              style="margin-bottom: 10px"
              >编辑图片</el-button
            ><br />
            <el-image
              v-for="(item, index) in VImgList2"
              :key="index"
              style="
                width: 148px;
                height: 148px;
                border-radius: 6px;
                margin: 0 8px 8px 0;
              "
              :src="item.url"
            >
            </el-image>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadGoodsImage } from '@/api/purchase/goods';
import { update, query } from '@/api/settingsMenu/adsTools';
export default {
  data () {
    return {
      notice: null,
      editJTImg: false,
      JTImgList: [],
      editVImg1: false,
      VImgList1: [],
      editVImg2: false,
      VImgList2: [],
    };
  },
  mounted () {
    this.query();
  },
  methods: {
    onRemove (file, list) {
      list.some((item, index) => {
        if (item.uid === file.uid) {
          list.splice(index, 1);
          return true;
        }
      });
    },
    async onUpload (param, list) {
      const loading = this.$loading();
      try {
        const result = await uploadGoodsImage(param.file);
        list.push({ url: result });
      } catch (error) {
        console.error(error);
      }
      loading.close();
    },
    async update (type, content) {
      const loading = this.$loading();
      try {
        await update({ type, content });
        if (type === 2) this.editJTImg = false;
        else if (type === 3) this.editVImg1 = false;
        else if (type === 4) this.editVImg2 = false;
      } catch (error) {
        console.log(error);
      }
      loading.close();
    },
    handleExceed () {
      this.$message.warning('最多可上传6张图片');
    },

    updateNotice () {
      this.update(1, this.notice);
    },

    onJTUpload (param) {
      this.onUpload(param, this.JTImgList);
    },
    onJTRemove (file) {
      this.onRemove(file, this.JTImgList);
    },
    submitJTUpload () {
      this.update(2, JSON.stringify(this.JTImgList));
    },

    onVUpload1 (param) {
      this.onUpload(param, this.VImgList1);
    },
    onVRemove1 (file) {
      this.onRemove(file, this.VImgList1);
    },
    submitVUpload1 () {
      this.update(3, JSON.stringify(this.VImgList1));
    },

    onVUpload2 (param) {
      this.onUpload(param, this.VImgList2);
    },
    onVRemove2 (file) {
      this.onRemove(file, this.VImgList2);
    },
    submitVUpload2 () {
      this.update(4, JSON.stringify(this.VImgList2));
    },

    async query () {
      const loading = this.$loading();
      try {
        const result = await query();
        result.map(item => {
          switch (item.type) {
            case 1:
              this.notice = item.content;
              break;
            case 2:
              this.JTImgList = JSON.parse(item.content) || [];
              break;
            case 3:
              this.VImgList1 = JSON.parse(item.content) || [];
              break;
            case 4:
              this.VImgList2 = JSON.parse(item.content) || [];
              break;

            default:
              break;
          }
        });
      } catch (error) {
        console.log(error);
      }
      loading.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.mt50 {
  margin-top: 50px;
}
.flex-box {
  display: flex;
  .bold {
    font-weight: bold;
  }
  .label {
    width: 120px;
    text-align: right;
    margin-right: 10px;
  }
}
</style>
